<!DOCTYPE html>

<html>
<head>
  <title>indexView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="app.html">
                app.coffee
              </a>
            
              
              <a class="source" href="appInstance.html">
                appInstance.coffee
              </a>
            
              
              <a class="source" href="appMessages.html">
                appMessages.coffee
              </a>
            
              
              <a class="source" href="appSettings.html">
                appSettings.coffee
              </a>
            
              
              <a class="source" href="baseList.html">
                baseList.coffee
              </a>
            
              
              <a class="source" href="baseModel.html">
                baseModel.coffee
              </a>
            
              
              <a class="source" href="countdown.html">
                countdown.coffee
              </a>
            
              
              <a class="source" href="countdownList.html">
                countdownList.coffee
              </a>
            
              
              <a class="source" href="eggTimer.html">
                eggTimer.coffee
              </a>
            
              
              <a class="source" href="scheduledTwitter.html">
                scheduledTwitter.coffee
              </a>
            
              
              <a class="source" href="aboutView.html">
                aboutView.coffee
              </a>
            
              
              <a class="source" href="baseView.html">
                baseView.coffee
              </a>
            
              
              <a class="source" href="countdownChristmasView.html">
                countdownChristmasView.coffee
              </a>
            
              
              <a class="source" href="countdownView.html">
                countdownView.coffee
              </a>
            
              
              <a class="source" href="eggTimerView.html">
                eggTimerView.coffee
              </a>
            
              
              <a class="source" href="indexView.html">
                indexView.coffee
              </a>
            
              
              <a class="source" href="statsView.html">
                statsView.coffee
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>indexView.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap for-h2">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <h2>INDEX VIEW</h2>

            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>This is the start page view.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">IndexView</span> <span class="keyword">extends</span> <span class="title">window</span>.<span class="title">App</span>.<span class="title">BaseView</span></span></pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Init the view.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    init: =&gt;
        <span class="property">@setDom</span> [<span class="string">"#txtTitle"</span>, <span class="string">"#txtDate"</span>, <span class="string">"#txtOnEndMessage"</span>, <span class="string">"#txtCreatorName"</span>
                 <span class="string">"#chkIsPrivate"</span>, <span class="string">"#chkPlaySound"</span>,
                 <span class="string">"#moreInfo"</span>, <span class="string">"#addMore"</span>, <span class="string">"#butSubmit"</span>, <span class="string">".quickDates"</span>]
        <span class="property">@setEvents</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Bind events to DOM elements.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    setEvents: =&gt;
        <span class="property">@dom</span>.butSubmit.click <span class="property">@createClick</span></pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Each span inside the <code>quickDates</code> represent a quick date fill with a specific timing.
Set the click event to bind these dates to the <code>txtDate</code> element.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="property">@dom</span>.quickDates.find(<span class="string">"span"</span>).click <span class="property">@quickDateClick</span></pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>CLicking on the <code>addMore</code> span will show the <code>moreInfo</code> div.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="property">@dom</span>.addMore.click <span class="property">@showMoreInfo</span></pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap for-h2">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <h2>GENERAL VIEW METHODS</h2>

            </div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>When user clicks a quick date link, get its interval data (in minutes) and
add to the current date at <code>txtDate</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    quickDateClick: (e) =&gt;
        src = $ e.currentTarget
        interval = src.data <span class="string">"interval"</span>
        targetDate = moment()</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Get the first character to parse the desired datetime.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        firstChar = interval.toString().substring <span class="number">0</span>, <span class="number">1</span>
        addedValue = interval.toString().substring <span class="number">1</span>

        <span class="keyword">if</span> firstChar <span class="keyword">is</span> <span class="string">"y"</span>
            targetDate.year targetDate.year() + parseInt(addedValue)
        <span class="keyword">else</span> <span class="keyword">if</span> firstChar <span class="keyword">is</span> <span class="string">"m"</span>
            targetDate.month targetDate.month() + parseInt(addedValue)
        <span class="keyword">else</span>
            targetDate.minute targetDate.minute() + interval

        <span class="property">@dom</span>.txtDate.val targetDate.format App.Settings.General.dateFormat</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>Show the <code>moreInfo</code> div. Called when user clicks the <code>addMore</code> span.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    showMoreInfo: =&gt;
        <span class="keyword">if</span> <span class="property">@dom</span>.addMore.hasClass <span class="string">"down"</span>
            <span class="property">@dom</span>.moreInfo.slideDown App.Settings.UI.slideInterval, =&gt;
                <span class="property">@dom</span>.addMore.removeClass(<span class="string">"down"</span>).addClass(<span class="string">"up"</span>)
                <span class="property">@dom</span>.addMore.find(<span class="string">"span"</span>).html(App.Messages.lessOptions)
        <span class="keyword">else</span>
            <span class="property">@dom</span>.moreInfo.slideUp App.Settings.UI.slideInterval, =&gt;
                <span class="property">@dom</span>.addMore.removeClass(<span class="string">"up"</span>).addClass(<span class="string">"down"</span>)
                <span class="property">@dom</span>.addMore.find(<span class="string">"span"</span>).html(App.Messages.moreOptions)</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap for-h2">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <h2>CREATE COUNTDOWN</h2>

            </div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>When user clicks the &quot;Create&quot; button, validate the <a href="countdown.html">Countdown</a>, save
to the server and redirect to the countdown page.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    createClick: =&gt;
        <span class="property">@validateForm</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>Validate the form before sending to the server. The validation is done
by the <a href="countdown.html">Countdown</a> model itself, and returns the DOM field
which is invalid or null if it&#39;s all good.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    validateForm: =&gt;
        cd = <span class="keyword">new</span> App.Countdown()

        invalidField = cd.validateClientForm <span class="property">@dom</span>.txtTitle, <span class="property">@dom</span>.txtDate, <span class="property">@dom</span>.txtOnEndMessage, <span class="property">@dom</span>.txtCreatorName, <span class="property">@dom</span>.chkIsPrivate, <span class="property">@dom</span>.chkPlaySound

        <span class="keyword">if</span> invalidField?
            <span class="property">@warnField</span> invalidField
        <span class="keyword">else</span>
            <span class="property">@submitCountdown</span> cd</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>Submit the form with the specified <a href="countdown.html">Countdown</a> model and call
its <code>save</code> method. If successful, redirect to the <a href="countdownView.html">countdown page</a>,
otherwise show the error message to the user.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    submitCountdown: (cd) =&gt;
        <span class="keyword">if</span> App.Settings.General.debug
            console.warn <span class="string">"IndexView.submitCountdown"</span>, cd.attributes

        cd.save {onSuccess: <span class="property">@saveOk</span>, onError: <span class="property">@saveError</span>}
        <span class="property">@dom</span>.butSubmit.prop <span class="string">"disabled"</span>, <span class="literal">true</span></pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <p>Callback for successful save, redirect the user to the countdown page.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    saveOk: (cd, data) =&gt;
        data = data[<span class="number">0</span>] <span class="keyword">if</span> data[<span class="number">0</span>]?
        document.location.href = <span class="string">"/"</span> + data.friendlyUrl</pre></div></div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <p>Callback for error when saving, show the error message to the user.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    saveError: (cd, error) =&gt;
        <span class="property">@showAlert</span> error</pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap for-h2">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <h2>APPEND VIEW TO WINDOW</h2>

            </div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre>window.App.currentView = <span class="keyword">new</span> IndexView()</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
